<template>
  <div class="account-container">
    <!-- 卡片部分 -->
    <el-card class="account-card" shadow="hover">
      <div slot="header" class="card-header">
        <span style="font-size: 24px"><strong>账号信息</strong></span>
        <span style="margin-left: 5px"
          >(操作员：{{ accountData.accountOperatorId }})</span
        >
        <span
          ><!-- 添加按钮 -->
          <el-button
            type="primary"
            @click="addUser"
            style="margin-top: 10px; margin-left: 20px"
            size="small"
            plain
          >
            添加用户
          </el-button></span
        >
        <span
          ><!-- 修改信息按钮 -->
          <el-button
            type="primary"
            @click="editAccount"
            style="margin-top: 10px; margin-left: 20px"
            size="small"
            plain
          >
            修改信息
          </el-button></span
        >
        <span
          ><!-- 申请按钮 -->
          <el-button
            type="success"
            @click="applyForAccount"
            style="margin-top: 10px; margin-left: 20px"
            size="small"
            plain
          >
            申请新号
          </el-button></span
        >
        <span style="margin-top: 10px; margin-left: 20px; font-size: 14px">
          <!-- 账户状态 -->
          账户状态:
          <span :class="getAccountStateStyle(accountData.accountState)">{{
            accountData.accountState
          }}</span>
        </span>
      </div>
      <div class="card-content">
        <p><strong>GPT&Gmail账号: </strong>{{ accountData.accountGmail }}</p>
        <p>
          <strong>GPT密码: </strong>{{ accountData.accountChatgptPassword }}
        </p>
        <p>
          <strong>Gmail密码: </strong>{{ accountData.accountGmailPassword }}
        </p>
        <p><strong>备注：</strong>{{ accountData.accountDetails }}</p>
        <p><strong>银行卡尾号：</strong>{{ accountData.accountBankNumber }}</p>
      </div>
    </el-card>

    <!-- 表格部分 -->
    <el-table
      :data="userData"
      border
      style="margin-top: 20px; width: 100%"
      row-class-name="custom-row"
    >
      <el-table-column prop="userUsername" label="昵称"></el-table-column>
      <el-table-column
        prop="userContactWay"
        label="联系平台"
        width="100px"
      ></el-table-column>
      <el-table-column
        prop="userPaymentDate"
        label="充值日期"
      ></el-table-column>
      <el-table-column
        prop="userPaymentNextdate"
        label="有效期至"
      ></el-table-column>
      <el-table-column
        prop="userPaymentAmount"
        label="充值金额"
      ></el-table-column>
      <el-table-column prop="userUpdateTime" label="更新时间"></el-table-column>
      <el-table-column
        prop="userServiceName"
        label="服务名"
      ></el-table-column>
      <el-table-column
        prop="userDetail"
        label="备注"
        width="300px"
      ></el-table-column>
      <el-table-column prop="userState" label="状态" width="100px">
        <template slot-scope="scope">
          <el-tag :type="getUserStatusType(scope.row.userState)">
            {{ getUserStatusText(scope.row.userState) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <div class="botton-flex">
            <el-button
              @click="editUser(scope.row.userId)"
              type="primary"
              circle
              plain
              icon="el-icon-edit"
              size="small"
            ></el-button>
            <el-button
              style="margin-left: 30px"
              @click="deleteUser(scope.row.userId)"
              type="danger"
              circle
              plain
              icon="el-icon-delete"
              size="small"
            ></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
  <script>
import { mapGetters } from "vuex";
export default {
  name: "AccountComponent",
  props: {
    accountData: {
      type: Object,
      required: true,
      default: () => ({
        accountGmail: "默认账号",
        accountChatgptPassword: "默认密码",
        accountGmailPassword: "默认密码",
      }),
    },
    userData: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    return {
      uername: null,
    };
  },
  computed: {
    ...mapGetters("user", ["user"]), // 从 user 模块中获取 user
  },
  methods: {
    getUserStatusType(status) {
      if (status === "正常") {
        return "success"; // 绿色
      } else if (status === "待续费") {
        return "warning"; // 黄色
      } else if (status === "待续费(超5天)") {
        return "danger";
      } else if (status === "退出") {
        return "info";
      } else {
        return "info"; // 默认样式
      }
    },
    getUserStatusText(status) {
      if (status === "正常") {
        return "正常";
      } else if (status === "待续费") {
        return "待续费";
      } else if (status === "待续费(超5天)") {
        return "待续费(超5天)";
      } else if (status === "退出") {
        return "退出";
      } else {
        return "未知状态";
      }
    },

    getAccountStateStyle(state) {
      if (state === "待修改密码") {
        return "account-state-red";
      } else if (state === "正常") {
        return "account-state-green";
      } else {
        return ""; // 默认样式
      }
    },

    // 通知父组件添加用户
    addUser() {
      this.$emit("add-user"); // 发出事件
    },

    // 通知父组件编辑用户
    editUser(userId) {
      this.$emit("edit-user", userId); // 发出事件
    },

    // 通知父组件删除用户
    deleteUser(userId) {
      this.$emit("delete-user", userId); // 发出事件
    },

    // 通知父组件申请账号
    applyForAccount() {
      this.$emit("apply-for-account"); // 发出事件
    },

    // 通知父组件修改账号信息
    editAccount() {
      this.$emit("edit-account"); // 发出事件
    },
  },
};
</script>
  
<style scoped>
.account-state-green {
  color: #28a745; /* 绿色 */
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 4px;
  background-color: #d4edda; /* 浅绿色背景 */
}

.account-state-red {
  color: #dc3545; /* 红色 */
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 4px;
  background-color: #f8d7da; /* 浅红色背景 */
}

.botton-flex {
  display: flex;
  justify-content: center;
  align-content: center;
}

.account-container {
  padding: 20px;
  min-height: 50vh;
}

.account-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.card-content {
  font-size: 14px;
  line-height: 24px;
}

/* 自定义表格行高度 */
.custom-row {
  height: 40px !important; /* 设置表格行的高度 */
  line-height: 40px; /* 确保文字垂直居中 */
}
</style>